<template>
  <div>
    <div class="top">
      <div class="top-op">
        <el-button type="primary">新建用户</el-button>
        <el-button type="danger" :icon="DeleteFilled">批量删除</el-button>
        <div class="search-panel">
          <el-input :suffix-icon="Search"></el-input>
        </div>
        <div class="refresh-btn">
          <el-button :icon="RefreshRight"></el-button>
        </div>
      </div>
      <div class="top-navigation">
        <span>用户列表</span>
      </div>
    </div>
    <div class="list"></div>
  </div>
</template>

<script setup lang="ts">
import { DeleteFilled, RefreshRight, Search } from "@element-plus/icons-vue";
</script>

<style lang="scss" scoped>
.top {
  margin-top: 20px;

  .top-op {
    display: flex;
    align-items: center;

    .search-panel {
      width: 300px;
      margin-left: 10px;
    }

    .refresh-btn {
      margin-left: 10px;
    }
  }
}
.top-navigation {
  font-size: 13px;
  display: flex;
  align-items: center;
  line-height: 40px;
  span {
    font-weight: 700;
  }
}
</style>
